<template>
    <div class="my-page">
      <!--个人资料-->
      <div class="profile-info">
        <img :src="user.avatar" alt="Avatar" class="avatar" />
        <p>{{ user.name }}</p>
        <p>{{ user.email }}</p>
      </div>
      <!--关注、听歌时长、粉丝、等级-->
      <div class="user-stats">
        <div class="stat">
          <p>关注</p>
          <p>{{ stats.following }}</p>
        </div>
        <div class="stat">
          <p>听歌时长</p>
          <p>{{ stats.listeningHours }} 小时</p>
        </div>
        <div class="stat">
          <p>粉丝</p>
          <p>{{ stats.followers }}</p>
        </div>
        <div class="stat">
          <p>等级</p>
          <p>{{ stats.level }}</p>
        </div>
      </div>
      
      <!--我的歌单 --- 喜欢 --- 创建 ---收藏-->
      <div class="playlist">
        <h3>我喜欢的歌单</h3>
        <div class="song-list">
          <div class="song" v-for="song in favoriteSongs" :key="song.id">
            <img :src="song.image" alt="Song Image" class="song-image" />
            <p>{{ song.title }} - {{ song.artist }}</p>
          </div>
        </div>
      </div>
      <div class="playlist">
        <h3>我创建的歌单</h3>
        <div class="playlist-list">
          <div class="playlist-item" v-for="playlist in createdPlaylists" :key="playlist.id">
            <img :src="playlist.image" alt="Playlist Image" class="playlist-image" />
            <p>{{ playlist.name }}</p>
          </div>
        </div>
      </div>
      <div class="playlist">
        <h3>我收藏的歌单</h3>
        <div class="playlist-list">
          <div class="playlist-item" v-for="playlist in savedPlaylists" :key="playlist.id">
            <img :src="playlist.image" alt="Playlist Image" class="playlist-image" />
            <p>{{ playlist.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        user: {
          name: '杨子鉴',
          email: '2625246143@qq.com',
          avatar: '/preview1.jpg'
        },
        stats: {
          following: 120,
          listeningHours: 350,
          followers: 89,
          level: 8
        },
        favoriteSongs: [
          { id: 1, title: '稻香', artist: '周杰伦', image: '/song2.jpg' },
          { id: 2, title: 'Eutopia', artist: 'eutopia', image: '/song1.jpg' },
        ],
        createdPlaylists: [
          { id: 1, name: '创建的歌单 1', image: '/问心.jpg' },
          { id: 2, name: '创建的歌单 2', image: '/song3.jpg' },
        ],
        savedPlaylists: [
          { id: 1, name: '收藏的歌单 1', image: '/玫瑰少年.png' },
          { id: 2, name: '收藏的歌单 2', image: '/preview1.jpg' },
        ],
      };
    },
  };
  </script>
  
  <style scoped>
  .my-page {
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    margin: 30px auto;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .avatar {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .profile-info p {
    margin: 10px 0;
  }
  .user-stats {
    display: flex;
    justify-content: space-around;
    margin: 5px 0;
  }
  .stat {
    text-align: center;
  }
  .stat p {
    margin: 5px 0;
  }
  .playlist {
    margin-top: 30px;
    text-align: left;
  }
  .playlist h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
  }
  .song-list, .playlist-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .song, .playlist-item {
    width: calc(50% - 10px);
    text-align: center;
  }
  .song-image, .playlist-image {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 5px;
  }
  </style>
  